<!--
 * @Description: 首页大屏
 * @Author: 黄旭日
 * @Date: 2021-03-30 10:22:01
 * @LastEditors: Ronda
 * @LastEditTime: 2021-04-12 23:02:34
-->
<template>
  <!-- 黄旭日 -->
  <div class="indexScreen">
    <el-alert title="以下数据均为Mock模拟" type="success"></el-alert>
    <div class="dynamic"> 动态大图
    </div>

    <div class="header">
      <p>增长数据</p>
      <ul class="addData">
        <li>农业产量</li>
        <li>农业收量</li>
        <li>农业增量</li>
      </ul>
    </div>
    <div class="content">
      <div class="currentYear">今年销量走势</div>
      <div class="currentMonth">本月销量</div>
    </div>
  </div>
</template>

<script>
  // import * as echarts from 'echarts';

  import $ from 'jquery'
  import AllOptions from './index'
  import dynamic from './dynamic/index'
  export default {
    data () {
      return {};
    },
    computed: {},
    methods: {
      init () {
        $(function () {
          //头部
          let olis = $('.addData li');
          for (let i = 0; i < olis.length; i++) {
            let oli = olis[i];
            let myChart = echarts.init(oli);
            myChart.setOption(AllOptions.headOptions[i])
          }

          //今年销量走势
          let currentYear = $('.currentYear')[0];
          let myChart_currentYear = echarts.init(currentYear);
          myChart_currentYear.setOption(AllOptions.contentOptions[0]);


          let currentMonth = $('.currentMonth')[0];
          let myChart_currentMonth = echarts.init(currentMonth);
          myChart_currentMonth.setOption(AllOptions.contentOptions[1]);
        })

      },
      init2 () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init($('.dynamic')[0]);

        function run () {
          var data = dynamic.dynamicOptions[0].series[0].data;
          for (var i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
              data[i].value += Math.round(Math.random() * 2000);
            }
            else {
              data[i].value += Math.round(Math.random() * 200);
            }
          }
          myChart.setOption(dynamic.dynamicOptions[0]);
        }

        setTimeout(function () {
          run();
        }, 0);
        setInterval(function () {
          run();
        }, 3000);

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(dynamic.dynamicOptions[0]);

      }
    },
    created () { },
    mounted () {
      this.init();
      this.init2();
    },
  };
</script>
<style scoped>
  .dynamic {
    width: 100%;
    height: 400px;
    box-shadow: 0 0 5px 0 #aaa;
    margin: 10px 0;
  }
  .header {
    width: 100%;
    padding: 5px;
    box-shadow: 0 0 5px 0 #aaa;
  }
  .header:hover {
    box-shadow: 0 0 10px 0 #aaa;
  }
  .addData {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .addData li {
    width: 30%;
    height: 300px;
    /* border: 1px solid #bbb; */
    box-shadow: 0 0 5px 0 #bbb;
  }
  .content {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 5px 0 #bbb;
    margin: 10px 0;
  }
  .currentYear {
    flex: 3;
    height: 400px;
    /* background: red; */
  }
  .currentMonth {
    flex: 2;
    /* background: blue; */
  }
</style>
